import { TabBar } from 'antd-mobile'
import React from 'react'
import {withRouter} from 'react-router-dom'

const { Item } = TabBar
function NavFooter(props) {

    const {navList, unReadCount} = props;
    const path = props.location.pathname 
    return <TabBar>
        {
            navList.filter(i => i.hidden !== true).map(nav => (
                <Item key={nav.path}
                badge={nav.path==='/message' ? unReadCount : 0}
                title={nav.text}
                icon={{uri: require(`./images/${nav.icon}.png`)}}
                selectedIcon={{uri: require(`./images/${nav.icon}-selected.png`)}}
                selected={path===nav.path}
                onPress={() => props.history.replace(nav.path)}
                />
            ))
        }
    </TabBar>
}

export default withRouter(NavFooter)